<template>
  <a-card :bordered="false" style="height: 100%;">
    <a-spin :spinning="loading">
      <a-input-search placeholder="按部门名称搜索…" style="margin-bottom: 10px" @search="onSearch" allowClear/>
      <!--组织机构树-->
      <template v-if="treeData.length > 0">
        <a-tree
            v-if="!treeReloading"
            showLine
            :clickRowToExpand="false"
            :treeData="treeData"
            :selectedKeys="selectedKeys"
            :load-data="loadChildrenTreeData"
            v-model:expandedKeys="expandedKeys"
            @select="onSelect"
        ></a-tree>
      </template>
      <a-empty v-else description="暂无数据"/>
    </a-spin>
  </a-card>
</template>

<script lang="ts" setup>
import { inject, nextTick, ref, unref, defineExpose } from 'vue'
import { queryDepartTreeSync } from '../address.api'
import { searchByKeywords } from '/@/views/system/departUser/depart.user.api'
import { Popconfirm } from 'ant-design-vue'

const prefixCls = inject('prefixCls')
const emit = defineEmits(['select', 'rootTreeData'])

const loading = ref<boolean>(false)
// 部门树列表数据
const treeData = ref<any[]>([])
// 当前展开的项
const expandedKeys = ref<any[]>([])
// 当前选中的项
const selectedKeys = ref<any[]>([])
// 树组件重新加载
const treeReloading = ref<boolean>(false)
// 当前选中的部门
const currentDepart = ref<any>(null)
// 搜索关键字
const searchKeyword = ref('')

// 加载顶级部门信息
async function loadRootTreeData() {
  try {
    loading.value = true
    treeData.value = []
    const result = await queryDepartTreeSync()
    if (Array.isArray(result)) {
      treeData.value = result
    }
    if (expandedKeys.value.length === 0) {
      autoExpandParentNode()
    }
  } finally {
    loading.value = false
  }
}

loadRootTreeData()

// 加载子级部门信息
async function loadChildrenTreeData(treeNode) {
  try {
    const result = await queryDepartTreeSync({
      pid: treeNode.dataRef.id,
    })
    if (result.length == 0) {
      treeNode.dataRef.isLeaf = true
    } else {
      treeNode.dataRef.children = result
      if (expandedKeys.value.length > 0) {
        // 判断获取的子级是否有当前展开的项
        let subKeys: any[] = []
        for (let key of expandedKeys.value) {
          if (result.findIndex(item => item.id === key) !== -1) {
            subKeys.push(key)
          }
        }
        if (subKeys.length > 0) {
          expandedKeys.value = [...expandedKeys.value]
        }
      }
    }
    treeData.value = [...treeData.value]
  } catch (e) {
    console.error(e)
  }
  return Promise.resolve()
}

// 自动展开父节点，只展开一级
function autoExpandParentNode() {
  let item = treeData.value[0]
  if (item) {
    if (!item.isLeaf) {
      expandedKeys.value = [item.key]
    }
    reloadTree()
  }
}

// 重新加载树组件，防止无法默认展开数据
async function reloadTree() {
  await nextTick()
  treeReloading.value = true
  await nextTick()
  treeReloading.value = false
}

/**
 * 设置当前选中的行
 */
function setSelectedKey(key: string, data?: object) {
  selectedKeys.value = [key]
  if (data) {
    currentDepart.value = data
    emit('select', data)
  }
}

// 搜索事件
async function onSearch(value: string) {
  if (value) {
    try {
      loading.value = true
      treeData.value = []
      let result = await searchByKeywords({ keyWord: value })
      if (Array.isArray(result)) {
        treeData.value = result
      }
      autoExpandParentNode()
    } finally {
      loading.value = false
    }
  } else {
    loadRootTreeData()
  }
  searchKeyword.value = value
}

// 树选择事件
function onSelect(selKeys, event) {
  if (selKeys.length > 0 && selectedKeys.value[0] !== selKeys[0]) {
    setSelectedKey(selKeys[0], event.selectedNodes[0].props)
  } else {
    // 这样可以防止用户取消选择
    setSelectedKey(selectedKeys.value[0])
  }
}


defineExpose({
  loadRootTreeData,
})
</script>
